<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟考试系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>模拟考试系统</h1>
            <nav>
                <button id="examBtn" class="nav-btn active">模拟考试</button>
                <button id="wrongQuestionsBtn" class="nav-btn">错题库</button>
                <button id="trainingBtn" class="nav-btn">错题强化训练</button>
            </nav>
        </header>

        <main>
            <!-- 模拟考试界面 -->
            <div id="examSection" class="section active">
                <div class="exam-header">
                    <h2>模拟考试</h2>
                    <div class="exam-info">
                        <span>剩余时间: <span id="timeLeft">60:00</span></span>
                        <span>当前题号: <span id="currentQuestionNum">1</span>/<span id="totalQuestions">0</span></span>
                    </div>
                </div>
                <div class="start-exam-container">
                    <button id="startExamBtn" class="start-exam-button">开始考试</button>
                    <p class="exam-info-text">点击开始考试按钮，系统将从题库中随机抽取50道题目进行考试</p>
                </div>
                <div id="examContent" class="question-container" style="display: none;">
                    <div id="questionContent" class="question-content">
                        <p>请先导入题库开始考试</p>
                    </div>
                    <div id="optionsContainer" class="options-container">
                        <!-- 选项将动态生成 -->
                    </div>
                    <div class="navigation-buttons">
                        <button id="prevBtn" class="nav-button">上一题</button>
                        <button id="nextBtn" class="nav-button">下一题</button>
                        <button id="submitBtn" class="submit-button">提交答案</button>
                    </div>
                </div>
            </div>

            <!-- 错题库界面 -->
            <div id="wrongQuestionsSection" class="section">
                <h2>错题库</h2>
                <div id="wrongQuestionsList" class="questions-list">
                    <p>暂无错题记录</p>
                </div>
            </div>

            <!-- 错题强化训练界面 -->
            <div id="trainingSection" class="section">
                <h2>错题强化训练</h2>
                <div class="training-controls">
                    <button id="startTraining" class="training-button">开始训练</button>
                    <button id="resetTraining" class="training-button">重置训练</button>
                </div>
                <div id="trainingContainer" class="training-container">
                    <p>点击"开始训练"开始错题强化训练</p>
                </div>
            </div>

        </main>
    </div>

    <script src="questions.js"></script>
    <script src="script.js"></script>
</body>
</html>
